/* ====================================== toast  ====================================== */
import React from 'react'
import { Radio } from 'antd'
const Ask = window.$Lazy.load(()=>import('#tp/ask'))
// ===================================================================== Radio
const _ = ({ data = [], idStr = 'value', nameStr='name', name, value, onChange, onChanged, onClick, size, mode, dir='x', disabled, outer }) => {
	const [ result, setResult ] = React.useState(value)
	
	React.useEffect(()=>{
		setResult(value)
	},[value])
	
	const _onChange = React.useCallback( e => {
		const value = e.target.value
		const model = name ? { [name]: value } : value
		
		if(!outer){ setResult(value) }
		
		onChanged?.({ model, value })
		onChange?.(value)
	},[onChange, onChanged, name, outer])
	
	
	const _dir = dir==='y' ? {display:'block',textAlign:'left'} :  {}
	return (
		<Radio.Group size={size} value={result} onChange={_onChange} buttonStyle='solid' disabled={disabled}>
			{
				mode === 'button' && data.map((v, i) => <Radio.Button buttonStyle='solid' key={i} onClick={()=>{onClick&&onClick(i)}} value={v[idStr]}>{v[nameStr]}</Radio.Button>)
			}
			{
				mode !== 'button' && data.map((v, i) => (
					<Radio key={i} onClick={()=>{onClick&&onClick(i)}} value={v[idStr]} style={{ marginRight: '20px', lineHeight: '30px', ..._dir }}>
						{v[nameStr]}
						{ v.tip && <Ask tip={v.tip} /> }
					</Radio>)
				)
			}
		</Radio.Group>
	)
}
export default _